<template>
    <div class="avatar-container">
        <div class="left-container" @click="$router.push('/userInfo')">
            <div class="avatar">
                <img :src="imgUrl" alt="" srcset="" />
            </div>
            <div class="name">{{ name }}</div>
        </div>
        <div v-if="$checkRole() != 3" class="qr-code" @click="goWxworkQrcode">
            <van-icon name="qr" color="#fff" />
        </div>
    </div>
</template>
<script>
    import avatarImg from "@/assets/images/my/avatar.png";
    export default {
        props: {
            imgUrl: {
                type: String,
                default: avatarImg,
            },
            name: {
                type: String,
                default: "",
            },
        },
        data() {
            return {
                avatarImg,
            };
        },
        methods: {
            goWxworkQrcode() {
                this.$router.push("/upload/wxWorkQrcode");
            },
        },
    };
</script>
<style lang="scss" scoped>
    .avatar-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        .left-container {
            display: flex;
            align-items: center;
        }
        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #Fef7e8;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .name {
            margin-left: 10px;
            color: #fff;
            font-size: 14px;
        }
        .qr-code {
            margin-top: 4px;
            margin-right: 10px;
            i {
                font-size: 24px;
            }
        }
    }
</style>